;(function($){
    "use strict";
    $.fn.banner = function(ops){
        // console.log(this)
        ops = ops || {};
        // ops.btn = ops.btn===undefined ? true : ops.btn;
        let {
            items,
            btn = true,
            list = true,
            autoPlay = true,
            delayTime = 2000,
            moveTime = 200,
            index = 0,
            prev_text = "prev",
            next_text = "next",
            currentList = ""
        } = ops;

        let prev;

        // 1. 生成图片结构
        const imgbox = $("<div class='imgbox'>");
        items.forEach(val=>{
            $(`<img src='${val.src}' alt='${val.alt}' title='${val.title}'>`).appendTo(imgbox);
        })
        imgbox.appendTo(this);
        imgbox.children("img").eq(index).css({
            left:0
        })

        // 2. 是否需要左右按钮
        if(btn){
            // 生成左右按钮
            $("<div class='btns'>").appendTo(this).append($("<span class='left'>"+prev_text+"</span>")).append($("<span class='right'>"+next_text+"</span>"))
            // 左右按钮的点击事件
            $(".left").click(function(){
                // 左按钮的计算索引
                if(index === 0){
                    index = items.length-1;
                    prev = 0;
                }else{
                    index--;
                    prev = index+1;
                }
                // console.log(prev, index)
                // 根据索引，移动图片
                move(1)
            });
            $(".right").click(function(){
                // 右按钮的计算索引
                if(index === items.length-1){
                    index = 0;
                    prev = items.length-1;
                }else{
                    index++;
                    prev = index-1;
                }
                // console.log(prev, index)
                // 根据索引，移动图片
                move(-1)
            });

            function move(d){
                // 提前获取图片的宽度
                const w = imgbox.children("img").eq(0).width();
                // 先控制要走的图片
                //     从哪走
                //     走到哪
                imgbox.children("img").eq(prev).css({
                    left: 0
                }).stop().animate({
                    left: w * d
                })
                .end()
                // 再控制要进来的图片
                //     从哪进
                //     进到哪
                .eq(index).css({
                    left: -w * d
                }).stop().animate({
                    left: 0
                })

                // 左右按钮，操作分页器的样式
                // 操作之前先判断是否有分页器
                if(!list) return;
                $(".list").children("li").removeClass(currentList).eq(index).addClass(currentList);
            }
        }

        // 3. 是否需要分页器
        if(list){
            // 生成分页器结构
            const list = $("<ul class='list'>").appendTo(this);
            for(var i=0;i<items.length;i++){
                list.append($("<li>"+(i)+"</li>"))
            }
            // 添加分页器的默认样式
            list.children("li").eq(index).addClass(currentList).end()
            // 绑定事件
            .click(function(){
                // 判断方向
                if($(this).index() > index){
                    // console.log("左");
                    move(index, $(this).index(), -1)
                }
                if($(this).index() < index){
                    // console.log("右");
                    move(index, $(this).index(), 1)
                }
                // 每次点完之后，点击的索引，就是下次的当前
                index = $(this).index();
            })
            function move(prev, index, d){
                // 提前获取图片的宽度
                const w = imgbox.children("img").eq(0).width();
                imgbox.children("img").eq(prev).css({
                    left: 0
                }).stop().animate({
                    left: w * d
                }).end().eq(index).css({
                    left: -w * d
                }).stop().animate({
                    left: 0
                })
                // 取消所有分页器的class，给当前分页器添加
                list.children("li").removeClass(currentList).eq(index).addClass(currentList)
            }
        }
    }
})(jQuery);